<template>
  <div>
    <el-dialog v-model="dialogVisible" title="Tips" width="500">
      <el-form :model="formModal">
        <el-form-item label="名称">
          <el-input
            v-model="formModal.lname"
            placeholder="请输入名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="formModal.ltype"
            placeholder="请选择类型"
            clearable
          >
            <el-option label="水果" value="水果" />
            <el-option label="蔬菜" value="蔬菜" />
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="formModal.ldate"
            type="date"
            placeholder="请选择日期"
            clearable
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubit"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, defineExpose, reactive, watch } from "vue";
import axios from "axios";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";

const dialogVisible = ref(false);

let formModal = reactive({
  lname: "",
  ltype: "",
  ldate: "",
});

defineExpose({
  updateVisible: (val: boolean) => {
    dialogVisible.value = val;
  },
});

watch(dialogVisible, (newValue) => {
  if (!newValue) {
    formModal = {
      lname: "",
      ltype: "",
      ldate: "",
    };
  }
});

const handleSubit = () => {
  axios({
    url: "http://localhost:9090/lx/add",
    data: {
      ...formModal,
      ldate: dayjs(formModal.ldate).format("YYYY-MM-DD"),
    },
    method: "POST",
  }).then((res) => {
    if (res.data.code === 10000) {
    
      ElMessage({
        message: res.data.msg,
        type: "success",
      });
      dialogVisible.value=false
    }
    console.log(res);
  });
};
</script>

<style scoped></style>
